<template>
  <div>
    <div class="product-detail">
      <img class="product-img"
           :src="productDetail.productPicture">
      <div class="product-info">
        <div class="product-name">{{ productDetail.productName }}</div>
        <div class="product-sellNumber">已售{{ productDetail.sellNumber }}</div>
        <div class="product-desc">{{ productDetail.productDesc }}</div>
        <div class="product-price">￥{{ productDetail.productPrice }}</div>
        <div class="product-number">
          <el-input-number v-model="productDetail.productNumber" />
        </div>
        <div class="operation">
          <el-button type="warning"
                     class="add-order"
                     @click="goOrderDetail">立即购买</el-button>
          <el-button type="danger"
                     class="add-car"
                     @click="addToCart">加入购物车</el-button>
        </div>
        <el-button type="success"
                   class="add-car"
                   @click="goTrace">溯源信息</el-button>
        <el-button type="primary"
                   class="add-car"
                   @click="collection">收藏</el-button>
      </div>
    </div>
    <div class="comment-region">
      <div class="comment-list">
        <div class="comment-head">商品评价
          <span class="comment-score">评论总数{{ total }}</span>
          <span class="comment-score">评分总数{{ productDetail.commentScore }}</span>
        </div>
        <div class="comment-form">
          <el-input v-model="comment"
                    type="textarea"
                    class="comment-input"
                    :rows="2" />
          <div class="block"
               style="display: flex;margin-top: 5px;">
            <div style="margin: 5px;">描述相符：</div>
            <el-rate v-model="commentScore"
                     :colors="colors"
                     :max="3"
                     class="custom-rate"
                     style="margin: 5px;"
                     show-text
                     :texts="texts"
                     text-color="#ff9900">
            </el-rate>
          </div>
          <el-button class="comment-btn"
                      type="primary"
                     style="margin-top:10px"
                     @click="submitComment">提交</el-button>
        </div>
        <div v-for="item in commentList"
             :key="item.commentId"
             class="comment">
          <el-image class="comment-img"
                    :src="item.userAmateur" />
          <div class="comment-info">
            <div class="comment-username">{{ item.userName }}</div>
            <div class="comment-content">{{ item.userComment }}</div>
          </div>
          <div class="comment-time">{{ item.gmtCreate }}</div>
        </div>
        <el-pagination layout="prev, pager, next, jumper,total"
                       :total="total"
                       background=""
                       prev-text="上一页"
                       next-text="下一页"
                       :current-page="pageNum"
                       :page-size="pageSize"
                       style="margin-top:15px"
                       @size-change="pageSizeChange"
                       @current-change="pageChange" />
      </div>
    </div>
  </div>
</template>

<script>
import { getProductById } from '@/api/product'
import { addCart } from '@/api/mall/cart'
import { getPageComment, addComment } from '@/api/mall/comment'
import { addCollection } from '@/api/mall/collections'
export default {
  name: 'ProductDetail',
  components: {},
  data () {
    return {
      productDetail: {},
      productId: '',
      pageNum: 1,
      pageSize: 5,
      commentList: [],
      total: 0,
      comment: '',
      commentScore: null,
      colors: { 1: '#99A9BF', 2: '#F7BA2A', 3: '#FF9900' },
      texts: ['差', '中', '好']
    }
  },
  mounted () {
    this.productId = this.$route.query.productId
    this.init()
    this.load()
  },
  methods: {
    async init () {
      const data = await getProductById(this.productId)
      this.productDetail = data.data
      this.productDetail.productNumber = 1
    },
    load () {
      getPageComment({
        productId: this.productId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.commentList = res.data.records
        this.total = res.data.total
      })
    },
    goOrderDetail () {
      this.$router.push({ name: 'orderDetail', params: { type: 1, product: JSON.stringify(this.productDetail) } })
    },
    async addToCart () {
      const userId = await this.$getUserId()
      addCart({
        userId: userId,
        protTraceId: this.productDetail.traceId,
        productId: this.productDetail.productId,
        productName: this.productDetail.productName,
        productDesc: this.productDetail.productDesc,
        productPicture: this.productDetail.productPicture,
        productPrice: this.productDetail.productPrice,
        productNumber: this.productDetail.productNumber
      }).then(res => {
        if (res.flag) {
          this.$message({
            message: res.message,
            type: 'success'
          })
        }
      })
    },
    async submitComment () {
      var commentScore = null;
      if (!this.comment) {
        this.$message({
          message: '请填写评论信息'
        })
        return
      } else if (!this.commentScore) {
        this.$message({
          message: '请填写描述相符'
        })
        return
      }
      if (this.commentScore == 1) {
        commentScore = -5
      } else if (this.commentScore == 2) {
        commentScore = 0
      } else if (this.commentScore == 3) {
        commentScore = 5
      }
      console.log(commentScore);
      const userId = await this.$getUserId()
      addComment({
        productId: this.productId,
        userId: userId,
        userComment: this.comment,
        commentScore: commentScore
      }).then(res => {
        if (res.flag) {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.comment = ''
          this.load()
        }
      })
    },
    goTrace () {
      this.$router.push({ name: 'trace', params: { product: JSON.stringify(this.productDetail) } })
    },
    async collection () {
      const userId = await this.$getUserId()
      addCollection({
        userId: userId,
        protTraceId: this.productDetail.traceId,
        productId: this.productDetail.productId,
        productName: this.productDetail.productId,
        productDesc: this.productDetail.productDesc,
        productPicture: this.productDetail.productPicture,
        productPrice: this.productDetail.productPrice
      }).then(res => {
        if (res.flag) {
          this.$message({
            message: '收藏成功',
            type: 'success'
          })
        }
      })
    },
    pageChange(val){
      this.pageNum = val;
      this.load()
    }
  }
}
</script>

<style lang="scss" scoped>
.product-detail {
  margin: 20px;
  display: flex;
  .product-img {
    width: 300px;
    height: 300px;
    object-fit: cover;
  }
  .product-info {
    width: 400px;
    padding: 20px;
    margin-left: 10px;

    .product-name {
      font-size: 20px;
    }
    .product-sellNumber {
      font-size: 16px;
      color: #888;
      margin-top: 5px;
    }
    .product-desc {
      margin: 10px 0;
    }

    .product-number {
      margin-bottom: 20px;
    }

    .product-price {
      color: red;
      font-size: 30px;
      margin-bottom: 20px;
    }
    .operation {
      margin-bottom: 20px;
    }
  }
}

.comment-region {
  .comment-list {
    .comment {
      width: 100%;
      height: 100px;
      border-bottom: 1px solid #aaa;
      margin-bottom: 10px;

      .comment-img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        float: left;
      }

      .comment-info {
        margin-left: 10px;
        float: left;
        .comment-username {
          line-height: 35px;
          font-weight: 600;
          color: #666;
        }

        .comment-content {
          line-height: 50px;
          color: #888;
        }
      }

      .comment-time {
        float: right;
        line-height: 50px;
      }
    }
    .comment-head {
      font-weight: 600;
      font-size: 20px;
      margin: 10px;

      .comment-score {
        font-weight: 400;
        font-size: 16px;
        color: #888;
        margin: 0 5px;
      }
    }
  }
}

.comment-btn{
  margin:10px 0 ; 
}
</style>
